<template>
  <div class="app-container">
    <div>
      <el-row :gutter="10">
        <el-col :span="6" :xs="24" :lg="24">
          <div class="bgwhite plr20 ptb20 radius10 flex-col">
            <div class="justify-between w100p">
              <div class="clr3c4 bold ft26">編輯</div>
              <div class="clr9fa align-center pointer" @click="back()">
                <el-icon>
                  <Back />
                </el-icon>
                返回上一頁
              </div>
            </div>
            <div class="mt40">
              <div class="flex gap-4 mb-4">
                <span class="mr20 ft">昵稱:</span>
                <el-input v-model="username" style="width: 440px" placeholder="請輸入昵稱" />

              </div>
              <div class="flex gap-4 mb-4 mt20 ">
                <span class="mr20 self-start">頭像:</span>
                <!-- <el-avatar shape="square" :size="100" :fit="'cover'" :src="url" /> -->
                <el-upload v-model:file-list="fileList" :headers="headers" name="images" :action="$upUrl" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="onSuccess">
                  <el-button class="btn2">選擇文件</el-button>
                </el-upload>

                <el-dialog v-model="dialogVisible">
                  <img w-full :src="dialogImageUrl" alt="Preview Image" />
                </el-dialog>
              </div>
              <div class="mt40 mb15 flex-cen ">
                <div class="align-center">
                  <el-button class="btn1">重置</el-button>
                  <el-button class="btn2" @click="submit()">提交</el-button>
                </div>

              </div>
            </div>


          </div>

          <!-- <user-card :user="user" /> -->
        </el-col>

        <!-- <el-col :span="6" :xs="24">
          <user-card :user="user" />
        </el-col> -->

        <!-- <el-col :span="18" :xs="24">
          <el-card>
            <el-tabs v-model="activeTab">
              <el-tab-pane label="Activity" name="activity">
                <activity />
              </el-tab-pane>
              <el-tab-pane label="Timeline" name="timeline">
                <timeline />
              </el-tab-pane>
              <el-tab-pane label="Account" name="account">
                <account :user="user" />
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col> -->

      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { editInfo } from '@/api/user'
import { ref, Ref } from 'vue';
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const username = ref(userStore.username)
let avatar = userStore.avatar
console.log('用户头像', userStore)
const headers = {
  Authorization: userStore.token
}


import type { UploadProps, UploadUserFile } from 'element-plus'
import { useRouter } from 'vue-router';

const dialogImageUrl = ref(avatar)
const dialogVisible = ref(false)
const fileList = ref<UploadUserFile[]>([
  {
    name: 'avatar',
    url: avatar
  },
])

const onSuccess = (res) => {
  // console.log('上传成功', res[0].path)
  let path = res.data[0].path
  let avatar = `https://beta.paiduoduo.app/${path}`
  let file = [
    {
      name: 'avatar',
      url: avatar
    }
  ]
  fileList.value = file
  console.log(avatar)

}


const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}
// const 
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}
const router = useRouter()
const back = () => {
  router.back()
}
// 编辑资料
const submit = () => {
  // console.log(typeof fileList.value[0].url)
  // return
  editInfo({
    name: username.value,
    avatar: fileList.value.length ? fileList.value[0].url : ''
  }).then((res) => {
    console.log('编辑成功', res)
    userStore.username = username.value
    userStore.avatar = `${fileList.value[0].url}`
  })
}
/* export default defineComponent({
  name: 'Profile',
  data () {
    return {
      user: {},
      activeTab: 'activity'
    };
  },
  computed: {
    ...mapState(store.user, [
      'name',
      'avatar',
      'roles'
    ])
  },
  watch: {
    name (newVal) {
      this.user.name = newVal;
    }
  },
  created () {
    this.getUser();
  },
  methods: {
    getUser () {
      this.user = {
        name: this.name,
        role: this.roles.join(' | '),
        email: 'admin@test.com',
        avatar: this.avatar
      };
    }
  }
}); */
</script>
<style scoped >
:deep(.el-upload--picture-card) {
  background-color: transparent;
  border: none;
}

:deep(.el-input) {
  box-shadow: none;
}

:deep(.el-dialog__body) {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>